<template>
  <!-- <zero-loading v-if="loading" mask type="pulse"></zero-loading> -->
	<u-navbar
	  :autoBack="true"
		title="资讯"
	>
	</u-navbar>
  <view class="container" :style="{marginTop: `${topHeight+40}px`}">
    <view class="title">
      {{current.title}}
    </view>
		<view class="memo">
			<view>{{current.author}}</view>
			<view style="margin: 0 10rpx;">·</view>
			<view>{{current.date}}</view>
		</view>
    <view class="create">
      <image :src="current.avatar" ></image>{{current.realName}}<span style="color: #999;margin-left: 10rpx;">{{current.createTime}}</span>
    </view>
    <view>
      <rich-text :nodes="current.detail"></rich-text>
    </view>
  </view>
</template>

<script>
  import graceRichText from "./rich-text-format.js"
	import news from '@/apis/cloud/news';

  export default {
    data() {
      return {
        current: {},
        id: null,
        loading: true,
				topHeight: 0,
      }
    },
		created(){
		  let app = uni.getSystemInfoSync();
			this.topHeight = app.statusBarHeight;
		},
    onLoad(option) {
			console.log(option)
      this.getDetail(option.id);
      this.id = option.id;
    },
    methods: {
      back() {

      },
      getDetail(id) {
        news.getDetail({id: id}).then(res => {
					console.log(res)
          const data = res.data;
          data.detail = graceRichText.format(data.detail);
          this.current = data;
        }).catch(err => {
					console.log(err)
          this.loading = false;
        })
      },
    }
  }
</script>

<style lang="scss">
.container {
  overflow: hidden;
  padding: 20rpx 40rpx 50rpx 40rpx;
}
.title {
  font-size: 34rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
}
.create {
  margin: -50rpx 0 28rpx 0;
  image {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 10rpx;
  }
}
.memo {
  display: flex;
	margin-top: 10rpx;
	font-size: 28rpx;
	color: #555;
}
</style>
